<template>
  <el-dialog v-model="visible" title="修改" :close-on-click-modal="false"  >

    <!--代码编辑器-->
    <div style="border: 1px solid #7F7F7F">
    <codemirror v-model:value="codeSnippets" :options="cmOptions" />
      <span>测试结果:</span>
      <el-input
        v-model="testRespond"
        :autosize="{ minRows: 4, maxRows: 15 }"
        type="textarea"
        style="margin-top: 3px;border: none;border-top:1px solid rgb(127, 127, 127); font-size: 14px;"
        readonly="readonly"
        :class="testRespond.indexOf('成功')>-1?'testRespondSucess':'testRespondErr'"
      />
    </div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="success" @click="test()">测试</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import {templateApi, templateSubmitApi,useTestGeneratorApi} from '@/api/template'
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh.js";
// 主题
//import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/idea.css";


const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref({})
const testRespond = ref('')
const dataForm = reactive({
  id: '',
  templateContent: ''
})


//代码编辑器
const codeSnippets = ref('');
const cmOptions = reactive({
  autorefresh: true,
  tabSize: 4,
  mode: "text/javascript",
  theme: "idea",
  line: false,
  viewportMargin: Infinity, //处理高度自适应时搭配使用
  highlightDifferences: true,
  autofocus: false,
  indentUnit: 2,
  smartIndent: true,
  // readOnly: true, // 只读
  showCursorWhenSelecting: true,
  firstLineNumber: 1,
});

const init = (id?: number) => {
  visible.value = true
  restContent()
  // id 存在则为修改
  if (id) {
    getTemplate(id)
  }
}
const getTemplate = (id: number) => {
  templateApi(id).then(res => {
    Object.assign(dataForm, res.data)
    if(dataForm.templateContent !=null){
      codeSnippets.value = dataForm.templateContent
    }
  })
}

const test=() =>{
  dataForm.templateContent = codeSnippets.value;
  useTestGeneratorApi(dataForm).then(res =>{
    testRespond.value = res.data
  })
}
// 表单提交
const submitHandle = () => {
  if(!dataForm.templateContent){
    ElMessage.warning("请输入模板内容");
    return;
  }
  dataForm.templateContent = codeSnippets.value;
  console.log(dataForm)
  templateSubmitApi(dataForm).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        restContent()
        visible.value = false
        emit('refreshDataList')
      }
    })
  })
}
const restContent= () =>{
  codeSnippets.value = ""
  testRespond.value =""
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.CodeMirror {
  height: 100vh;
  direction: ltr;
}

::v-deep .CodeMirror-scroll >.CodeMirror-sizer{
  min-height: 300px!important;
  font-size: 16px;
  font-family: Courier New;
}

::v-deep.el-dialog>.el-dialog__body{
  padding: 0px!important;
}

::v-deep.testRespondSucess{
  textarea{
    color: #13ce66;
  }
}
::v-deep.testRespondErr{
  textarea{
    color: #fd2222;
  }
}
</style>
